<template>
	<view class="bac-col-fa min-h-100">
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!loadStatus" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<custom-navber :top="42" :title="'圈子管理'"></custom-navber>
		<!-- #endif -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 'px'}">
			<v-tabs :fixed="true" :scroll="false" :pills="true" bgColor="#ffffff00" pillsColor="#ffffff00"
				fontSize="30rpx" activeFontSize="32rpx" lineHeight="40rpx"
				activeColor="linear-gradient(to right, #1e1e1e, #1e1e1e)"
				color="linear-gradient(to right, #616161, #616161)" bold lineColor="#14cc60" v-model="current"
				:tabs="tabs"></v-tabs>
		</view>
		<view class="ping-30">
			<!-- 如果圈子列表为空 -->
			<view v-if="circleData.length == 0 || filteredCircleData.length == 0" class="activity-empty-box">
				<image class="activity-empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/circle-empty.png"
					mode="scaleToFill" />
				<view class="fs-28 fw-600">暂无圈子</view>
			</view>
			<view v-else>
				<view v-for="(item,index) in filteredCircleData" :key="index"
					class="bac-col-f br-20 mt-10 pos-rela mb-30 animate__fadeIn dh-0-4s" style="z-index: 1;">
					<view class="ping-30">
						<view class="flex-dir-row flex-x-bet ali-item-cen">
							<view class="flex-dir-row flex-x-bet ali-item-sta w-100">
								<view class="flex-dir-row ali-item-cen">
									<qmy-gender-border :gender="item.user_gender"
										:avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
										:avatarWidth="75 + 'rpx'" :avatarHeight="75 + 'rpx'"></qmy-gender-border>
									<view class="ml-20">
										<view class="fs-26 fw-600 flex-dir-row ali-item-cen">
											<view class="text-element-1">{{item.user_name || '匿名用户'}}</view>
											<view v-if="item.is_essence" class="fs-20 highlighted">精选</view>
										</view>
										<view class="fs-24 col-b1 mt-5">
											{{$timeFormat(item.last_modify_date || item.publish_date)}}
										</view>
									</view>
								</view>
								<view>
									<view @tap="taptext($event,index)" class="iconfont ic-dian fs-48"></view>
									<chunLei-popups v-model="isBubble" :popData="bubbleData" direction="row"
										@tapPopup="tapPopup" :x="bubbleX" :y="bubbleY" placement="top-end" dynamic>
									</chunLei-popups>
								</view>
							</view>
						</view>
						<view class="mt-20" @click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)">
							<view class="fs-28 text-element-4">
								{{item.title}}
							</view>
							<image v-if="item.thumbnail.length == 1" class="br-20 mt-20 image-280"
								:src="item.thumbnail[0]" mode="aspectFill">
							</image>
							<view v-else-if="item.thumbnail.length == 2" class="flex-dir-row flex-x-bet">
								<image v-for="(url,its) in item.thumbnail"
									:class="its == 0?'brtl-20 brbl-20':'brtr-20 brbr-20'" :key="its"
									class="mt-20 image-3125" :src="url" mode="aspectFill">
								</image>
							</view>
							<view v-else-if="item.thumbnail.length >= 3" class="flex-dir-row flex-x-bet">
								<image v-for="(url,its) in item.thumbnail.slice(0,3)"
									:class="its == 0?'brtl-20 brbl-20':its == 1?'':'brtr-20 brbr-20'" :key="its"
									class="mt-20 image-205" :src="url" mode="aspectFill">
								</image>
							</view>
						</view>
						<view>
							<view class="flex-x-bet ali-item-cen flex-dir-row mt-20">
								<view>
									<view v-if="item.activity_id"
										@click="$NavigateTo(`../detail/detail?id=${item.activity_id}`)"
										class="br-200 flex-dir-row ali-item-cen border-bf padding-5-15">
										<image class="image-28" :src="item.activity_img[0].src" mode="aspectFill">
										</image>
										<view class="fs-26 ml-10 text-element-1">{{item.activity_name}}</view>
									</view>
								</view>
								<view class="flex-dir-row ali-item-cen col-87">
									<view class="flex-dir-row ali-item-cen">
										<view class="iconfont ic-talk-line fs-46"></view>
										<view class="fs-28 ml-5">{{item.comment_count || 0}}</view>
									</view>
									<view @click="likeCircle(item._id)" class="flex-dir-row ali-item-cen ml-20">
										<view class="iconfont fs-46 "
											:class="item.like_user_id.includes(userInfo._id)?'ic-nice col-00ba31':'ic-nice-line col-87'">
										</view>
										<view class="fs-28 ml-5">{{item.like_user_id.length || 0}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
					<image src="/static/logo.png" class="bot-logo"></image>
					<image src="/static/name.png" class="bot-name" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				tabs: ['全部', '审核中', '审核失败'],
				circleData: [], // 我发布的圈子列表
				loadStatus: false, // 加载完成状态
				isBubble: false,
				bubbleX: 0,
				bubbleY: 0,
				bubbleData: [{
					title: '修改'
				}, {
					title: '删除'
				}],
				selectedIndex: 0,
				current: 0,
			}
		},
		computed: {
			userInfo() {
				return store.userInfo //用户信息
			},
			filteredCircleData() {
				return this.circleData.filter(item => {
					if (this.current === 0) return true;
					if (this.current === 1) return item.audit_status === 0;
					if (this.current === 2) return item.audit_status === 2;
					return true;
				});
			}
		},
		onLoad() {
			// 获取我发布的圈子列表
			this.getMyCircleData();
		},
		methods: {
			tapPopup(e) {
				if (e.title == '修改') {
					let that = this;
					uni.navigateTo({
						url: `/pages/publish/article?id=${this.circleData[this.selectedIndex]._id}`,
						events: {
							refreshData: () => {
								that.getMyCircleData();
							}
						}
					})
				} else {
					this.deleteCircle(this.circleData[this.selectedIndex]._id);
				}
			},
			taptext(e, index) {
				this.bubbleX = e.touches[0].clientX;
				this.bubbleY = e.touches[0].clientY;
				this.isBubble = !this.isBubble;
				this.selectedIndex = index;
			},
			// 获取我发布的圈子列表
			getMyCircleData() {
				this.loadStatus = false;
				this.$Route('get-private-data').getMyCircleData().then((res) => {
					this.circleData = res.data;
					this.loadStatus = true;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},
			// 删除圈子
			deleteCircle(id) {
				this.$Route('update-private-data').deleteCircle(id).then((res) => {
					this.$Toast(res.msg);
					setTimeout(() => {
						this.getMyCircleData();
					}, 1000);
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},
			//点赞、取消点赞
			likeCircle(id) {
				// 点赞节流
				this.$debounce(() => {
					// 点赞或取消点赞时先更新点赞状态点赞数，等待返回在确认是否复原
					this.circleData.forEach(item => {
						if (item._id == id) {
							item.like_user_id.includes(this.userInfo._id) ? item.like_user_id.splice(item
								.like_user_id
								.indexOf(this.userInfo._id), 1) : item.like_user_id.push(this.userInfo
								._id);
						}
					})
					this.$Route('add-private-data', true).likeCircle(id).then((res) => {
						// 不用刷新数据无影响且禁止刷新数据,会影响分页！
						// this.getMyCircleData();
					}).catch((err) => {
						this.circleData.forEach(item => {
							if (item._id == id) {
								item.like_user_id.includes(this.userInfo._id) ? item.like_user_id
									.splice(item
										.like_user_id.indexOf(this.userInfo._id), 1) : item
									.like_user_id.push(
										this.userInfo._id);
							}
						})
						console.error('遇到错误:', err); // 打印错误信息
						let {
							code,
							msg
						} = this.$parseError(err); // 调用公共解析方法
						this.$Toast(msg);
						setTimeout(() => {
							if (code === 401) {
								this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
							}
						}, 1000);
					});
				}, 500, true, "likeCircle")
			},
		}
	}
</script>

<style lang="scss">
	.image-130 {
		height: 130rpx;
	}

	.image-110 {
		width: 110rpx;
		height: 110rpx;
	}

	.image-75 {
		width: 75rpx;
		height: 75rpx;
	}

	.image-280 {
		height: 280rpx;
		max-width: 100%;
	}

	.image-205 {
		height: 205rpx;
		width: 205rpx;
	}

	.image-28 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 5rpx;
	}

	.image-3125 {
		height: 260rpx;
		width: 312rpx;
	}

	.highlighted {
		background: #ffe75c;
		width: 65rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		margin-left: 10rpx;
	}

	.padding-5-15 {
		padding: 5rpx 15rpx;
	}

	.edit-btn {
		width: 50%;
		height: 90rpx;
		text-align: center;
		border-bottom-right-radius: 20rpx;
		line-height: 90rpx;
	}

	.red-btn {
		width: 50%;
		height: 90rpx;
		text-align: center;
		border-bottom-left-radius: 20rpx;
		line-height: 90rpx;
		background: #ff0000;
		color: #fff;
	}
</style>